<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dashboard" />
<meta name="keyword"
	content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina" />
<meta name="referrer" content="never">

<title>PICQ48</title>

<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="assets/css/zabuto_calendar.css" />
<link rel="stylesheet" type="text/css"
	href="assets/js/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css" href="assets/lineicons/style.css" />

<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/style-responsive.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="css/index.css" />

<script src="assets/js/chart-master/Chart.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<section id="container">
		<!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
		<!--header start-->
		<header class="header black-bg">
			<div class="sidebar-toggle-box">
				<div class="fa fa-bars tooltips" data-placement="right"
					data-original-title="展开/收起"></div>
			</div>
			<!--logo start-->
			<a href="/index" class="logo"><b>PICQ48</b></a>
			<!--logo end-->
			<div class="top-menu" shiro:guest>
				<ul class="nav pull-right top-menu">
					<li><a class="logout" href="/login">登录</a></li>
				</ul>
			</div>
			<div class="top-menu" shiro:authenticated>
				<ul class="nav pull-right top-menu">
					<li><a class="logout" href="/logout">退出</a></li>
				</ul>
			</div>
		</header>
		<!--header end-->

		<!-- **********************************************************************************************************************************************************
      MAIN SIDEBAR MENU
      *********************************************************************************************************************************************************** -->
		<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">

					<p class="centered">
						<a href="javascript:void(0);"><img src="assets/img/ui-sam.jpg"
							class="img-circle" width="60" /></a>
					</p>
					<h5 class="centered">
						<span th:if="${session.user != null}"
							th:text="${session.user.nickname}"></span> <span
							th:unless="${session.user != null}">PICQ48</span>
					</h5>
					<li class="mt"><a class="active" href="/index"> <i
							class="fa fa-university"></i> <span>主页</span>
					</a></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-th-large"></i> <span>系统配置</span>
					</a>
						<ul class="sub">
							<li shiro:hasPermission="system-user:url"><a
								href="/system-manage/system-user">用户管理</a></li>
							<li shiro:hasPermission="system-role:url"><a
								href="/system-manage/system-role">角色管理</a></li>
							<li shiro:hasPermission="system-permission:url"><a
								href="/system-manage/system-permission">资源管理</a></li>
						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-cogs"></i> <span>机器人配置</span>
					</a>
						<ul class="sub">
							<li><a href="/resource-management/member-table">成员列表</a></li>
							<li><a href="/resource-management/modian-table">摩点项目列表</a></li>
							<li><a href="/resource-management/taoba-table">桃叭项目列表</a></li>
							<li><a href="/resource-management/weibo-table">微博用户列表</a></li>
							<li><a href="/resource-management/qq-table">QQ列表</a></li>
							<li><a href="/resource-management/quartz-confing-table">轮询配置列表</a></li>
						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-desktop"></i> <span>可视化数据</span>
					</a>
						<ul class="sub">
							<li><a href="/data-visualization/modian-visual">摩点项目数据</a></li>
							<li><a href="/data-visualization/taoba-visual">桃叭项目数据</a></li>
							<li><a href="/data-visualization/room-message">口袋房间消息</a></li>
							<!-- <li><a href="gallery.html">Gallery</a></li>
							<li><a href="todo_list.html">Todo List</a></li> -->
						</ul></li>
					<li class="sub-menu"><a href="/help"> <i
							class="fa fa-question-circle"></i> <span>帮助</span>
					</a></li>
					<!--  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-tasks"></i>
                          <span>Forms</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="form_component.html">Form Components</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-th"></i>
                          <span>Data Tables</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="basic_table.html">Basic Table</a></li>
                          <li><a  href="responsive_table.html">Responsive Table</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class=" fa fa-bar-chart-o"></i>
                          <span>Charts</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="morris.html">Morris</a></li>
                          <li><a  href="chartjs.html">Chartjs</a></li>
                      </ul>
                  </li> -->

				</ul>
				<!-- sidebar menu end-->
			</div>
		</aside>
		<!--sidebar end-->
		<div class="copyrights">
			Collect from <a href="http://www.cssmoban.com/">网页模板</a>
		</div>

		<section id="container">
			<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">

					<div class="row">
						<div class="col-lg-9 main-chart">

							<div class="row mtbox">
								<div class="col-md-2 col-sm-2 col-md-offset-1 box0">
									<div class="box1">
										<span th:utext=${mtbox.mtbox1.icon}></span>
										<h3 th:text="${mtbox.mtbox1.data}"></h3>
									</div>
									<p th:text="${mtbox.mtbox1.name}"></p>
								</div>
								<div class="col-md-2 col-sm-2 box0">
									<div class="box1">
										<span th:utext=${mtbox.mtbox2.icon}></span>
										<h3 th:text="${mtbox.mtbox2.data}"></h3>
									</div>
									<p th:text="${mtbox.mtbox2.name}"></p>
								</div>
								<div class="col-md-2 col-sm-2 box0">
									<div class="box1">
										<span th:utext=${mtbox.mtbox3.icon}></span>
										<h3 th:text="${mtbox.mtbox3.data}"></h3>
									</div>
									<p th:text="${mtbox.mtbox3.name}"></p>
								</div>
								<div class="col-md-2 col-sm-2 box0">
									<div class="box1">
										<span th:utext=${mtbox.mtbox4.icon}></span>
										<h3 th:text="${mtbox.mtbox4.data}"></h3>
									</div>
									<p th:text="${mtbox.mtbox4.name}"></p>
								</div>
								<div class="col-md-2 col-sm-2 box0">
									<div class="box1">
										<span th:utext=${mtbox.mtbox5.icon}></span>
										<h3 th:text="${mtbox.mtbox5.data}"></h3>
									</div>
									<p th:text="${mtbox.mtbox5.name}"></p>
								</div>

							</div>
							<!-- /row mt -->

							<div class="row mt firwin">
								<!-- SERVER STATUS PANELS -->
								<!-- 1-1窗 -->
								<div class="col-md-4 col-sm-4 mb" th:each="tbwin : ${tbwins}">
									<div class="white-panel pn">
										<div class="white-header">
											<h5 th:utext="${tbwin.name}"></h5>
										</div>
										<div class="row">
											<div class="col-sm-6 col-xs-6 goleft">
												<p>
													<i class="fa fa-shopping-cart"></i> <span
														th:text="${tbwin.count}"></span><span>&nbsp;人</span>
												</p>
											</div>
											<div class="col-sm-6 col-xs-6"></div>
										</div>
										<div class="centered">
											<img th:src="${tbwin.icon}" width="150" />
										</div>
										<div class="row">
											<div class="col-md-6">
												<p class="small mt">剩余时间</p>
												<p>
													<span th:text="${tbwin.date}"></span><span>&nbsp;h</span>
												</p>
											</div>
											<div class="col-md-6">
												<p class="small mt">已筹金额</p>
												<p>
													<span>¥&nbsp;</span><span th:text="${tbwin.data}"></span>
												</p>
											</div>
										</div>
									</div>
								</div>
								<!-- /col-md-4-->

							</div>
							<!-- /row -->


							<div class="row">
								<!-- TWITTER PANEL -->
								<!-- 2-1窗 -->
								<!-- <div class="col-md-4 mb">
									<div class="darkblue-panel pn">
										<div class="darkblue-header">
											<h5>暂无数据展示</h5>
										</div>
										<canvas id="serverstatus02" height="120" width="120"></canvas>
										<script>
											var doughnutData = [ {
												value : 60,
												color : "#68dff0"
											}, {
												value : 40,
												color : "#444c57"
											} ];
											var myDoughnut = new Chart(document
													.getElementById(
															"serverstatus02")
													.getContext("2d"))
													.Doughnut(doughnutData);
										</script>
										<p>April 17, 2014</p>
										<footer>
											<div class="pull-left">
												<h5>
													<i class="fa fa-hdd-o"></i> 17 GB
												</h5>
											</div>
											<div class="pull-right">
												<h5>60% Used</h5>
											</div>
										</footer>
									</div>
									/darkblue panel
								</div> -->
								<!-- /col-md-4 -->

								<!-- 2-2窗 -->
								<!-- <div class="col-md-4 mb">
									INSTAGRAM PANEL
									<div class="instagram-panel pn">
										<i class="fa fa-instagram fa-4x"></i>
										<p>暂无数据展示</p>
										<p>
											<i class="fa fa-comment"></i> 18 | <i class="fa fa-heart"></i>
											49
										</p>
									</div>
								</div> -->
								<!-- /col-md-4 -->

								<!-- 2-3窗 -->
								<!-- <div class="col-md-4 col-sm-4 mb">
									<div class="darkblue-panel pn">
										<div class="darkblue-header">
											<h5>暂无数据展示</h5>
										</div>
										<div class="chart mt">
											<div class="sparkline" data-type="line" data-resize="true"
												data-height="75" data-width="90%" data-line-width="1"
												data-line-color="#fff" data-spot-color="#fff"
												data-fill-color="" data-highlight-line-color="#fff"
												data-spot-radius="4"
												data-data="[200,135,667,333,526,996,564,123,890,464,655]"></div>
										</div>
										<p class="mt">
											<b>$ 17,980</b><br />Month Income
										</p>
									</div>
								</div> -->
								<!-- /col-md-4 -->

							</div>
							<!-- /row -->

							<div class="row mt">
								<!--CUSTOM CHART START -->
								<div class="border-head">
									<h3>口袋房间总消息数</h3>
								</div>
								<div class="custom-bar-chart">
									<ul class="y-axis">
										<li th:each="y : ${bar.yList}"><span th:text="${y}"></span></li>
									</ul>
									<div class="bar" th:each="x : ${bar.xList}">
										<div class="title" th:text="${x.name}"></div>
										<div class="value tooltips"
											th:data-original-title="${x.count}" data-toggle="tooltip"
											data-placement="top" th:text="${x.data}"></div>
									</div>
								</div>
								<!--custom chart end-->
							</div>
							<!-- /row -->

						</div>
						<!-- /col-lg-9 END SECTION MIDDLE -->


						<!-- **********************************************************************************************************************************************************
						      RIGHT SIDEBAR CONTENT
						      *********************************************************************************************************************************************************** -->

						<div class="col-lg-3 ds">

							<!-- 今日口袋房间活跃成员 -->
							<h3>今日活跃成员（已监控）</h3>
							<!-- First Member -->
							<div class="desc">
								<div class="thumb">
									<img class="img-circle" th:src="${ds.ds6.icon}" width="40px"
										align="" />
								</div>
								<div class="details">
									<p>
										&emsp;<a href="javascript:;" th:text="${ds.ds6.name}"></a><br />&emsp;活跃度：
										<muted th:text="${ds.ds6.data}"></muted>
									</p>
								</div>
							</div>
							<!-- Second Member -->
							<div class="desc">
								<div class="thumb">
									<img class="img-circle" th:src="${ds.ds7.icon}" width="40px"
										align="" />
								</div>
								<div class="details">
									<p>
										&emsp;<a href="javascript:;" th:text="${ds.ds7.name}"></a><br />&emsp;活跃度：
										<muted th:text="${ds.ds7.data}"></muted>
									</p>
								</div>
							</div>
							<!-- Third Member -->
							<div class="desc">
								<div class="thumb">
									<img class="img-circle" th:src="${ds.ds8.icon}" width="40px"
										align="" />
								</div>
								<div class="details">
									<p>
										&emsp;<a href="javascript:;" th:text="${ds.ds8.name}"></a><br />&emsp;活跃度：
										<muted th:text="${ds.ds8.data}"></muted>
									</p>
								</div>
							</div>
							<!-- Fourth Member -->
							<div class="desc">
								<div class="thumb">
									<img class="img-circle" th:src="${ds.ds9.icon}" width="40px"
										align="" />
								</div>
								<div class="details">
									<p>
										&emsp;<a href="javascript:;" th:text="${ds.ds9.name}"></a><br />&emsp;活跃度：
										<muted th:text="${ds.ds9.data}"></muted>
									</p>
								</div>
							</div>
							<!-- Fifth Member -->
							<div class="desc">
								<div class="thumb">
									<img class="img-circle" th:src="${ds.ds10.icon}" width="40px"
										align="" />
								</div>
								<div class="details">
									<p>
										&emsp;<a href="javascript:;" th:text="${ds.ds10.name}"></a><br />&emsp;活跃度：
										<muted th:text="${ds.ds10.data}"></muted>
									</p>
								</div>
							</div>

							<!-- 口袋房间活跃度 -->
							<h3>近7日口袋房间活跃度</h3>
							<!-- 第一名 -->
							<div class="desc">
								<div class="thumb">
									<span class="badge bg-no1">No.1</span>
								</div>
								<div class="details">
									<p>
										&emsp;
										<muted> <a href="javascript:;"
											th:text="${ds.ds1.name}"></a></muted>
										<br /> 所属成员：&nbsp;<span th:text="${ds.ds1.icon}"></span> <br />活跃度：&nbsp;<span
											th:text="${ds.ds1.data}"></span><br />
									</p>
								</div>
							</div>
							<!-- 第二名 -->
							<div class="desc">
								<div class="thumb">
									<span class="badge bg-no2">No.2</span>
								</div>
								<div class="details">
									<p>
										&emsp;
										<muted> <a href="javascript:;"
											th:text="${ds.ds2.name}"></a></muted>
										<br /> 所属成员：&nbsp;<span th:text="${ds.ds2.icon}"></span> <br />活跃度：&nbsp;<span
											th:text="${ds.ds2.data}"></span><br />
									</p>
								</div>
							</div>
							<!-- 第三名 -->
							<div class="desc">
								<div class="thumb">
									<span class="badge bg-no3">No.3</span>
								</div>
								<div class="details">
									<p>
										&emsp;
										<muted> <a href="javascript:;"
											th:text="${ds.ds3.name}"></a></muted>
										<br /> 所属成员：&nbsp;<span th:text="${ds.ds3.icon}"></span> <br />活跃度：&nbsp;<span
											th:text="${ds.ds3.data}"></span><br />
									</p>
								</div>
							</div>
							<!-- 第四名 -->
							<div class="desc">
								<div class="thumb">
									<span class="badge bg-theme">No.4</span>
								</div>
								<div class="details">
									<p>
										&emsp;
										<muted> <a href="javascript:;"
											th:text="${ds.ds4.name}"></a></muted>
										<br /> 所属成员：&nbsp;<span th:text="${ds.ds4.icon}"></span> <br />活跃度：&nbsp;<span
											th:text="${ds.ds4.data}"></span><br />
									</p>
								</div>
							</div>
							<!-- 第五名 -->
							<div class="desc">
								<div class="thumb">
									<span class="badge bg-theme">No.5</span>
								</div>
								<div class="details">
									<p>
										&emsp;
										<muted> <a href="javascript:;"
											th:text="${ds.ds5.name}"></a></muted>
										<br /> 所属成员：&nbsp;<span th:text="${ds.ds5.icon}"></span> <br />活跃度：&nbsp;<span
											th:text="${ds.ds5.data}"></span><br />
									</p>
								</div>
							</div>

							<!-- CALENDAR-->
							<div id="calendar" class="mb">
								<div class="panel green-panel no-margin">
									<div class="panel-body">
										<div id="date-popover" class="popover top"
											style="cursor: pointer; disadding: block; margin-left: 33%; margin-top: -50px; width: 175px;">
											<div class="arrow"></div>
											<h3 class="popover-title" style="disadding: none;"></h3>
											<div id="date-popover-content" class="popover-content"></div>
										</div>
										<div id="my-calendar"></div>
									</div>
								</div>
							</div>
							<!-- / calendar -->

						</div>
						<!-- /col-lg-3 -->
					</div>
					<!--/row -->
				</section>
			</section>

		</section>
		<!--main content end-->
		<!--footer start-->
		<footer class="site-footer">
			<div class="text-center">
				2019 - PICQ48 - 机器人QQ：<a href="javascript:void(0);"
					title="2965741174">2965741174</a> <a href="#container"
					class="go-top"> <i class="fa fa-angle-up"></i>
				</a>
			</div>
		</footer>
		<!--footer end-->
	</section>

	<!-- js placed at the end of the document so the pages load faster -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/jquery-1.8.3.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script class="include" type="text/javascript"
		src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
	<script src="assets/js/jquery.scrollTo.min.js"></script>
	<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="assets/js/jquery.sparkline.js"></script>


	<!--common script for all pages-->
	<script src="assets/js/common-scripts.js"></script>

	<script type="text/javascript"
		src="assets/js/gritter/js/jquery.gritter.js"></script>
	<script type="text/javascript" src="assets/js/gritter-conf.js"></script>

	<!--script for this page-->
	<script src="assets/js/sparkline-chart.js"></script>
	<script src="assets/js/zabuto_calendar.js"></script>

	<script type="application/javascript">
		
		
        $(document).ready(function () {
            $("#date-popover").popover({ html: true, trigger: "manual" });
            $("#date-popover").hide();
            $("#date-popover").click(function (e) {
                $(this).hide();
            });

            $("#my-calendar").zabuto_calendar({
                action: function () {
                    return myDateFunction(this.id, false);
                },
                action_nav: function () {
                    return myNavFunction(this.id);
                },
                ajax: {
                    url: "./show_data.php?action=1",
                    modal: true
                },
                legend: [
                    { type: "text", label: "Special event", badge: "00" },
                    { type: "block", label: "Regular event", }
                ]
            });
        });

        function myNavFunction(id) {
            $("#date-popover").hide();
            var nav = $("#" + id).data("navigation");
            var to = $("#" + id).data("to");
            console.log('nav ' + nav + ' to: ' + to.month + '/' + to.year);
        }

	
	
	
	</script>

</body>

</html>